<template>
  <div id="app">
    <p>-------------button----------------</p>
    <!-- <div>
      <div class="row">
        <sy-button icon="delete">默认按钮</sy-button>
        <sy-button type="primary">主要按钮</sy-button>
        <sy-button type="success">成功按钮</sy-button>
        <sy-button type="info">信息按钮</sy-button>
        <sy-button type="warning">警告按钮</sy-button>
        <sy-button type="danger">危险按钮</sy-button>
      </div>
      <div class="row">
        <sy-button plain>默认按钮</sy-button>
        <sy-button plain icon="delete" type="primary">主要按钮</sy-button>
        <sy-button plain type="success">成功按钮</sy-button>
        <sy-button plain type="info">信息按钮</sy-button>
        <sy-button plain type="warning">警告按钮</sy-button>
        <sy-button plain type="danger">危险按钮</sy-button>
      </div>
      <div class="row">
        <sy-button round>圆角按钮</sy-button>
        <sy-button round type="primary">主要按钮</sy-button>
        <sy-button round type="success">成功按钮</sy-button>
        <sy-button round type="info">信息按钮</sy-button>
        <sy-button round type="warning">警告按钮</sy-button>
        <sy-button round type="danger">危险按钮</sy-button>
      </div>
      <div class="row">
        <sy-button icon="delete" disabled>禁用按钮</sy-button>
        <sy-button type="primary" disabled>主要按钮</sy-button>
        <sy-button type="success" disabled>成功按钮</sy-button>
        <sy-button type="info" disabled>信息按钮</sy-button>
        <sy-button type="warning" disabled>警告按钮</sy-button>
        <sy-button type="danger" disabled>危险按钮</sy-button>
      </div>
      <div class="row">
        <sy-button circle icon="user"></sy-button>
        <sy-button circle icon="success" type="primary"></sy-button>
        <sy-button circle icon="s-comment" type="success"></sy-button>
        <sy-button circle icon="s-tools" type="info"></sy-button>
        <sy-button circle icon="trophy" type="warning"></sy-button>
        <sy-button circle icon="delete" type="danger"></sy-button>
      </div>
    </div>-->
    <p>-------------dialog----------------</p>
    <div class="row">
      <div>
        <sy-button type="primary" @click="visible=true">点击打开Dialog</sy-button>
        <sy-dialog>
          <template v-slot:title>
            <h3>我是一个标题</h3>
          </template>
        </sy-dialog>
      </div>
      <div>
        <sy-button type="primary" @click="visible2=true">自定义Dialog</sy-button>
        <sy-dialog title="这是一个提示的title" width="50%" top="100px" :visible.sync="visible2">
          <sy-form :model="model" label-width="100px">
            <sy-form-item label="用户名">
              <sy-input placeholder="请输入用户名" v-model="model.username" clearable></sy-input>
            </sy-form-item>
            <sy-form-item label="密码">
              <sy-input placeholder="请输入密码" v-model="model.password" type="password" show-password></sy-input>
            </sy-form-item>
            <sy-form-item label="选择">
              <sy-switch v-model="model.active"></sy-switch>
            </sy-form-item>
          </sy-form>
          <template v-slot:footer>
            <sy-button @click="visible2=false">取消</sy-button>
            <sy-button type="primary" @click="visible2=false">确定</sy-button>
          </template>
        </sy-dialog>
      </div>
    </div>
    <p>-------------input----------------</p>
    <h5>普通</h5>
    <sy-input placeholder="请输入内容" clearable></sy-input>
    <h5>密码框</h5>
    <sy-input placeholder="请输入密码" type="password" v-model="password" show-password></sy-input>
    <h5>禁用</h5>
    <sy-input placeholder="请输入内容" disabled></sy-input>
    <h5>支持双向绑定</h5>
    <sy-input v-model="username" clearable></sy-input>
    {{username}}
    <p>-------------switch----------------</p>
    <p>普通</p>
    <sy-switch v-model="value"></sy-switch>
    <p>自定义颜色</p>
    <sy-switch v-model="value" active-color="red" inactive-color="black"></sy-switch>
    <p>-------------radio----------------</p>
    <sy-radio label="0" v-model="gender">男</sy-radio>
    <sy-radio label="1" v-model="gender">女</sy-radio>
    <p>-------------radio-group----------------</p>
    <sy-radio-group v-model="gender2">
      <sy-radio label="0">张三</sy-radio>
      <sy-radio label="1">李四</sy-radio>
      <sy-radio label="2">王五</sy-radio>
      <sy-radio label="3">赵六</sy-radio>
    </sy-radio-group>
    <p>-------------checkbox----------------</p>
    <sy-checkbox v-model="active">是否选中</sy-checkbox>
    <sy-checkbox v-model="active2">是否选中</sy-checkbox>
    <p>-------------checkbox-group----------------</p>
    <sy-checkbox-group v-model="hobby">
      <sy-checkbox label="抽烟"></sy-checkbox>
      <sy-checkbox label="喝酒"></sy-checkbox>
      <sy-checkbox label="烫头"></sy-checkbox>
    </sy-checkbox-group>
    <p>-------------form&item----------------</p>
    <sy-form :model="model" label-width="100px">
      <sy-form-item label="用户名">
        <sy-input placeholder="请输入用户名" v-model="model.username" clearable></sy-input>
      </sy-form-item>
      <sy-form-item label="选择">
        <sy-switch v-model="model.active"></sy-switch>
      </sy-form-item>
    </sy-form>
    <p>-------------布局&栅格----------------</p>
    <div>
      布局
      <sy-layout>
        <sy-header style="height: 64px; background: #8bbae6">header</sy-header>
        <sy-content style="height: 100px; background: #418ce2">content</sy-content>
        <sy-footer style="height: 64px; background: #8bbae6">footer</sy-footer>
      </sy-layout>
    </div>
    <br />栅格
    <sy-row>
      <sy-col span="8">8</sy-col>
      <sy-col span="8">8</sy-col>
      <sy-col span="8">8</sy-col>
    </sy-row>
    <sy-row>
      <sy-col span="6">6</sy-col>
      <sy-col span="6">6</sy-col>
      <sy-col span="6">6</sy-col>
      <sy-col span="6">6</sy-col>
    </sy-row>
    <sy-row>
      <sy-col span="4">4</sy-col>
      <sy-col span="4">4</sy-col>
      <sy-col span="4">4</sy-col>
      <sy-col span="4">4</sy-col>
      <sy-col span="4">4</sy-col>
      <sy-col span="4">4</sy-col>
    </sy-row>
    <sy-row>
      <sy-col span="3">3</sy-col>
      <sy-col span="3">3</sy-col>
      <sy-col span="3">3</sy-col>
      <sy-col span="3">3</sy-col>
      <sy-col span="3">3</sy-col>
      <sy-col span="3">3</sy-col>
      <sy-col span="3">3</sy-col>
      <sy-col span="3">3</sy-col>
    </sy-row>
    <div>
      设置gutter
      <sy-row gutter="20">
        <sy-col span="8">8</sy-col>
        <sy-col span="8">8</sy-col>
        <sy-col span="8">8</sy-col>
      </sy-row>
      <sy-row gutter="10">
        <sy-col span="6">6</sy-col>
        <sy-col span="6">6</sy-col>
        <sy-col span="6">6</sy-col>
        <sy-col span="6">6</sy-col>
      </sy-row>
    </div>
    <p>Collapse 折叠面板 存在bug</p>
    <sy-collapse :selected.sync="selectedItem">
      <sy-collapse-item title="Hello 1" name="1">
        <div>Hello World~</div>
      </sy-collapse-item>
      <sy-collapse-item title="Hello 2" name="2">
        <div>Hello World~</div>
      </sy-collapse-item>
      <sy-collapse-item title="Hello 3" name="3">
        <div>Hello World~</div>
      </sy-collapse-item>
    </sy-collapse>
    <p>手风琴风格</p>
    <sy-collapse :selected.sync="selectedItem" single>
      <sy-collapse-item title="Hello 1" name="1">
        <div>Hello World~</div>
      </sy-collapse-item>
      <sy-collapse-item title="Hello 2" name="2">
        <div>Hello World~</div>
      </sy-collapse-item>
      <sy-collapse-item title="Hello 3" name="3">
        <div>Hello World~</div>
      </sy-collapse-item>
    </sy-collapse>
    <p>Tabs 标签页</p>
    <sy-tabs :selected.sync="selectedTab">
      <sy-tabs-head>
        <sy-tabs-item name="1">Tab 1</sy-tabs-item>
        <sy-tabs-item name="2">Tab 2</sy-tabs-item>
        <sy-tabs-item name="3">Tab 3</sy-tabs-item>
        <template v-slot:actions>
          <button>按钮</button>
        </template>
      </sy-tabs-head>
      <sy-tabs-body>
        <sy-tabs-pane name="1">Content of Tab Pane 1</sy-tabs-pane>
        <sy-tabs-pane name="2">Content of Tab Pane 2</sy-tabs-pane>
        <sy-tabs-pane name="3">Content of Tab Pane 3</sy-tabs-pane>
      </sy-tabs-body>
    </sy-tabs>
    <p>Popover 气泡卡片</p>
    <div>
      <sy-popover position="top">
        <template slot="content">
          <div>Content of popover</div>
        </template>
        <sy-button>Click me</sy-button>
      </sy-popover>
      <sy-popover position="top">
        <template slot="content">
          <div>Content of popover</div>
        </template>
        <sy-button>Top</sy-button>
      </sy-popover>
      <sy-popover position="bottom">
        <template slot="content">
          <div>Content of popover</div>
        </template>
        <sy-button>Bottom</sy-button>
      </sy-popover>
      <sy-popover position="left">
        <template slot="content">
          <div>Content of popover</div>
        </template>
        <sy-button>left</sy-button>
      </sy-popover>
      <sy-popover position="right">
        <template slot="content">
          <div>Content of popover</div>
        </template>
        <sy-button>Right</sy-button>
      </sy-popover>
    </div>
    <p>Toast 吐司</p>
    <div>
      <sy-button @click="showToastTop">Click me</sy-button>
      <sy-button @click="showToastTop">Top</sy-button>
      <sy-button @click="showToastMiddle">Middle</sy-button>
      <sy-button @click="showToastBottom">Bottom</sy-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      visible: false,
      visible2: false,
      username: 'Hello World!',
      password: '123132',
      value: true,
      gender: '1',
      gender2: '0',
      active: true,
      active2: false,
      hobby: ['抽烟'],
      model: { username: '', password: '', active: true },
      selectedTab: '1'
    }
  },
  methods: {
    close(value) {
      this.visible = value
    },
    showToastTop() {
      this.showToast('top')
    },
    showToastMiddle() {
      this.showToast('middle')
    },
    showToastBottom() {
      this.showToast('bottom')
    },
    showToast(position) {
      this.$toast('This is content of toast', {
        position: position,
        closeButton: {
          text: 'Close',
          callback(toast) {
            console.log('用户知道了')
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.row {
  margin-bottom: 20px;
}
.sy-button {
  margin-right: 20px;
}
.sy-input {
  width: 200px;
}
</style>
